<template>
	<view class="outside" @click="handlerClick(id)">
		<view class="status" v-if="showStatus" :style="cssProps">{{statusString}}</view>
		<image :src="img" mode="widthFix"></image>
		<view class="content">
			<view class="title">{{title}}</view>
			<view class="row">
				<text class="text">{{content}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			id: String,
			img: String,
			title: String,
			content: String,
			status: Number,
			showStatus: Boolean
		},
		data() {
			return {
				color: this.status == 0 ? "#007AFFdd" : (this.status == 1 ? "#4CD964dd" : "#eeeeeedd"),
				statusString: this.status == 0 ? "即将开始" : (this.status == 1 ? "活动中" : "已结束")
			}
		},
		methods: {
			handlerClick(id) {
				uni.navigateTo({
					url: "./showInfoOnline"
				})
			}
		},
		computed: {
			cssProps() {
				return {
					'--background-color': this.color
				}
			}
		}
	}
</script>

<style>
	.outside {
		padding: 15rpx;
		height: 200rpx;
		width: calc(100% - 30rpx);
		display: flex;
		flex-direction: row-reverse;
		position: relative;
	}

	.status {
		position: absolute;
		right: 15rpx;
		top: 15rpx;
		z-index: 10;
		height: 40rpx;
		line-height: 40rpx;
		width: 120rpx;
		color: #333;
		text-align: center;
		background: var(--background-color);
		font-size: 20rpx;
		border-radius: 0 10rpx 0 10rpx;
	}

	.outside image {
		border-radius: 10rpx;
		height: 100%;
		width: 300rpx;
	}

	.content {
		height: 100%;
		width: calc(100% - 315rpx);
		margin-right: 15rpx;
	}

	.title {
		height: 80rpx;
		line-height: 40rpx;
		/* width: 100%; */
		max-width: 400rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		color: #333;
	}

	.row {
		width: 100%;
		height: 90rpx;
		line-height: 30rpx;
		display: flex;
	}

	.text {
		text-align: justify;
		text-indent: 2em;
		font-size: 20rpx;
		
		color: #666;
		overflow: hidden;
		text-overflow: ellipsis;
	}
</style>
